<!DOCTYPE html>
<html lang="en">
<!-- 作者：段彦蓉、向志祥 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>院线</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>

    <div>
        <table id="left" lay-filter="test"></table>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        layui.use(['element', 'table', 'layer'], function (data) {
            const table = layui.table;
            const layer = layui.layer;
            table.render({
                elem: '#left',
                url: '/api/Cinema',
                autoSort: true,
                page: true,
                autoSort: false,
                toolbar: "#inp",
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    { field: 'image', title: '图片', templet:"#img" },
                    { field: 'name', title: '院线名' },
                    { field: 'addr', title: '地址' },
                    { field: 'tel', title: '电话' },
                    { title: "操作", templet: "#tabOperation" },
                ]],
                done: function (res, curr, count) {
                    hoverOpenImg();//显示大图
                    $('table tr').on('click', function () {
                        $('table tr').css('background', '');
                        $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                    });
                }
            })
            // table.on('sort(test)', function (obj) {
            //     tabObj.reload({
            //         initSort: obj,
            //         where: {
            //             field: obj.field,
            //             order: obj.type //排序方式
            //         }
            //     });
            // });
        })

        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:130px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: ['160px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px');
        }
    </script>
    <script type="text/html" id="inp">
        <a class="layui-btn layui-btn-sm btn-add" href="./addCinema.html" style="float: left;">添加院线</a>
            <form class="inline-block search-form" onsubmit="return false;">
                 <input type="text" id="tetKey" placeholder="关键字查询" class="layui-input search-input" style="width:300px;height: 31px;float: left;margin-left: 60px;"> 
                      <i class="layui-icon layui-icon-search" style="margin-left: -22px;" onclick="info('{{(d.id)}}',this)"></i> 
            </form> 
        </div>
    </script>
    <script type="text/html" id="img">
        <div><img src="{{ d.image }}"></div>
    </script>
    <script type="text/html" id="tabOperation">
        <div class="layui-table-cell laytable-cell-1-0-4"> 
            <a class="layui-btn layui-btn-sm layui-btn-default" href="updateCinema.html?cid={{d._id}}"> 编辑 </a> 
            <a class="layui-btn layui-btn-sm layui-btn-default" href="../MovieAndCinema/MovieAndCinema.html?cid={{d._id}}"> 上映和场次管理 </a> 
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del" onclick="deleteCinema('{{(d._id)}}',this)"> 
                <i class="layui-icon"></i>
            </button>
        </div>
    </script>
    <script>
        //作者：段彦蓉
        //模糊查询
        function info(id) {
            const key = $("#tetKey").val();
            layui.table.reload("left", {
                where: {
                    key,
                    page: 1
                }
            });//重新加载表格
        }

        //作者：段彦蓉
        //删除院线
        function deleteCinema(id, btn) {
            layer.msg("删除成功", {
                icon: 1,
                time: 1000,
            }, function (index) {
                $.ajax({
                    url: "/api/Cinema/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }
    </script>
</body>

</html>